require('./PagePending.styl');
import { Control } from 'react-keeper'
import { NEW, RUNNING, TERMINATED, COMPLETED, CANCELED } from 'clientConfig/constants'
import { monStorage, Storage } from 'clientConfig/util/StoreData';
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Boxs, Icon, Tab, SearchBar } = SaltUI;
const { HBox, Box } = Boxs;
const WithRefresh = require('components/withrefresh');
const PendingList = require('components/pendinglist')
const Search = require('components/search');
const ui = require('clientConfig/util/jsapi/ui');
var active = 0
const ListWithPending = WithRefresh(
    PendingList,
    (pageNum, props, success, error) => {
        Actions.fetchPending(pageNum, props, success, error)
    }
);
const ListWithPended = WithRefresh(
    PendingList,
    (pageNum, props, success, error) => {
        Actions.fetchPended(pageNum, props, success, error)
    }
);
class Pending extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            active: active,
            length: 0,
            currentType: 0 //0 搜索项目名称， 1 搜索项目编号
        };
        this.handleExchange = this.handleExchange.bind(this);
        this.refreshTitle = this.refreshTitle.bind(this);
        this.searchRange = ["项目名称", "项目编号"]
        this.handleChangeSearchType = this.handleChangeSearchType.bind(this);
    }
    handleExchange(obj) {
        this.setState({ active: obj.active }, () => {
            let title = this.state.active == 0 ? "待我审批的" : "我已审批的"
            ui.setTitle({ title });
        });

    }

    onsearch(keyword) {
        if (Control.state)
            var origin_search = Control.state.origin;
        else
            var origin_search = "";
        this.setState({
            keyword: keyword
        })
        if (keyword != undefined) {
            var props = {
                pageSize: 10,
                origin: origin_search
            }
            if (!!this.state.currentType) {//全为数字的是项目编号
                props.proj_num = keyword
                Actions.fetchPending(0, props)
            } else {
                props.proj_name = keyword
                Actions.fetchPending(0, props)
            }
        }
    }
    onexit() {//退出搜索
        this.setState({
            keyword: "",
            listData: []
        })
    }

    refreshTitle(length) {
        this.setState({ length })
    }

    handleChangeSearchType(currentType) {
        this.setState({ currentType })
    }

    render() {
        let t = this;
        let tool = false;
        if (Control.state)
            var origin = Control.state.origin;
        else
            var origin = "";
        return (
            <div className="pending list-tab">
                <Search onsearch={this.onsearch.bind(this)} searchRange={this.searchRange} data={this.state.listData}
                    origin={origin} onExit={this.onexit.bind(this)} tool={this.state.active} currentType={t.state.currentType} handleChangeSearchType={this.handleChangeSearchType} />
                <Tab active={this.state.active} onChange={this.handleExchange}>
                    <Tab.Item title={`待我审批的(${this.state.length})`}>
                        <ListWithPending
                            className="msg"
                            origin={origin}
                            tool={true}
                            refreshTitle={this.refreshTitle}
                            active={true}
                        />
                    </Tab.Item>
                    <Tab.Item title={`我已审批的`}>
                        {this.state.active && <ListWithPended
                            className="msg"
                            origin={origin}
                            tool={false}
                        />}
                    </Tab.Item>
                </Tab>

            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        active = this.state.active;
    }
}

reactMixin.onClass(Pending, Reflux.connect(Store));

module.exports = Pending;
